<template>
  <view class="container">
    <scroll-view scroll-y="true" :style="{ height: contentHeight + 'px' }">
      <view class="container_content">
        <view class="container_header">
          <view class="container_header_top">
            <view class="container_header_top_status">{{ $statusUtil.getStatus(orderInfo.orderStatus, orderInfo.payStatus, orderInfo.isAccept) }}</view>
            <button class="container_header_top_refund" v-if="$statusUtil.idOrderRefund(orderInfo.payStatus, orderInfo.orderStatus)" @click="showRefundPop">申请退款</button>
          </view>

          <view>感谢您对 社发配送 的支持，欢迎您的再次光临</view>
        </view>
        <view class="container_content_warehouse info-bg">
          <view class="container_content_warehouse_left">
            <view class="container_content_warehouse_left_top">
              <view class="container_content_warehouse_left_top_icon"> <image src="/static/image/order_bag.png" mode="widthFix" /></view>
              <view class="container_content_warehouse_left_top_name">{{ orderInfo.warehouseName }}</view>
            </view>
            <view class="container_content_warehouse_left_address"> {{ orderInfo.warehouseAddress }} </view>
          </view>
          <view class="container_content_warehouse_right" @click="goNavi">
            <image src="/static/image/loca_fly_icon.png" mode="widthFix" />
          </view>
        </view>
        <view class="info-bg" style="margin-top: 20rpx; padding: 20rpx">
          <view class="container_content_item" v-for="(item, index) in cartList" :key="index">
            <view class="container_content_item_pic">
              <image :src="item.mainImage ? item.mainImage : ' https://www.zjjqf.cn/file/static/undefined.png'" mode="aspectFill" />
            </view>
            <view class="container_content_item_title">{{ item.goodsName }}</view>
            <view class="container_content_item_right">
              <view class="text-bold">￥{{ item.taxPrice ? item.taxPrice.toFixed(2) : '' }}</view>
              <view class="container_content_item_right_num">共{{ item.goodsCount }}件</view>
            </view>
          </view>

          <view class="container_content_line"></view>

          <view class="container_content_coupon">
            <view class="container_content_coupon_title">
              <view class="container_content_coupon_title_left" @click="showCoupon = !showCoupon">
                <view>优惠合计</view>
                <!-- <uni-icons :type="showCoupon ? 'up' : 'down'" color="" size="20" /> -->
              </view>
              <!-- orderInfo.customerCouponAmount  优惠券和折扣冲突，临时改成优惠券金额=单商品金额-实付金额 -->
              <view class="container_content_coupon_title_right"> -￥{{ getCouponAmount }} </view>
            </view>
            <view v-if="showCoupon">
              <view class="container_content_coupon_detail" v-for="(subItem, subIndex) in orderInfo.customerCouponList" :key="subIndex">
                <view>{{ subItem.name }}</view>
                <view class="container_content_coupon_detail_price"> -￥{{ subItem.deductAmount }} </view>
              </view>
            </view>
          </view>
          <view class="container_content_amount">
            <text class="container_content_amount_label">共{{ totalGoodsCount }}件商品，实付</text>
            <text class="container_content_amount_label red">￥</text>
            <text class="container_content_amount_value">{{ orderInfo.taxAmount }}</text>
          </view>
        </view>

        <view class="container_content_info info-bg">
          <view class="container_content_info_row">
            <view class="container_content_info_row_label">下单时间</view>
            <view>{{ orderInfo.createTime }}</view>
          </view>
          <view class="container_content_info_row" style="margin-top: 20rpx">
            <view class="container_content_info_row_label">订单编号 </view>
            <view class="container_content_info_row_code">
              <view>{{ orderInfo.outTradeNo }}</view>
              <view class="container_content_info_row_code_copy" @click="copy">复制</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="container_bottom">
      <button class="container_bottom_btn" @tap="goShopping">再来一单</button>
    </view>
    <uni-popup ref="popup">
      <refundPop :item="orderInfo" @close="closeRefundPop" @submit="refundOrder"></refundPop>
    </uni-popup>
  </view>
</template>

<script>
import { debounce, getScreen, getUserInfo, getOpenId } from '@/service/auth'
import { orderDetail } from '@/service/api/orderquery'
import proxyGoods from '@/utils/proxyGoods.js'
import navbarMixin from '@/mxins/navbar.js'
import itemPrice from '@/components/itemPrice'
import { customerCollectCouponList } from '@/service/api/home'
import { nbPay } from '@/service/api/pay'
import { refundPop } from '@/components/refundPop'
import { refundApply } from '@/service/api/refund'
export default {
  name: 'shopping',
  mixins: [navbarMixin],
  components: { itemPrice, refundPop },
  data() {
    return {
      customerId: null,
      params: {},
      warehouseInfo: {},
      cartList: [],
      account: '',
      phone: '',
      couponCount: 0,
      salePrice: 0,
      currentCoupon: {},
      params: {
        id: '',
        page: '1',
        size: '999',
      },
      orderInfo: {},
      showCoupon: false,
      contentHeight: 0,
    }
  },
  created() {
    const { width, height } = getScreen()
    // this.contentHeight = height - (290 * width) / 750
    const app = getApp()

    const data = getUserInfo()
    this.user = JSON.parse(data)
    if (this.user) {
      this.customerId = this.user.customerIds
      this.account = this.user.userName
      this.phone = this.user.phone
    }
  },
  computed: {
    getCouponAmount(){
      let val = this.cartList.reduce((prev, cur) => prev + Number(cur.taxPrice * cur.goodsCount), 0)
      val = val - this.orderInfo.taxAmount
      return val.toFixed(2)
    },
    getAmount() {
      let val = this.cartList.reduce((prev, cur) => prev + Number(cur.taxPrice * cur.goodsCount), 0)
      val = val - this.orderInfo.customerCouponAmount
      return val.toFixed(2)
    },
    totalGoodsCount() {
      let val = this.cartList.reduce((prev, cur) => prev + Number(cur.goodsCount), 0)
      return val.toFixed(2)
    },
  },
  onLoad(option) {
    this.calcHeight()
    if (option.item) {
      const item = JSON.parse(decodeURIComponent(option.item))
      this.params.id = item.id
      this.getOrderDetail()
    }
  },
  onShow() {
    const app = getApp()
  },
  mounted() {},
  watch: {},

  methods: {
    calcHeight() {
      const systemInfo = uni.getSystemInfoSync()
      const query = uni.createSelectorQuery().in(this)
      query
        .select('.container_bottom')
        .boundingClientRect(data => {
          this.contentHeight = systemInfo.windowHeight - data.height
        })
        .exec()
    },

    getOrderDetail() {
      orderDetail(this.params).then(res => {
        // if (res.data.content.length < this.size) this.end = true
        this.orderInfo = res.data.order
        this.cartList = this.cartList.concat(res.data.content)
        this.summary = res.data.summary
      })
    },
    back() {
      uni.navigateBack({
        delta: 1,
      })
    },
    copy() {
      uni.setClipboardData({
        data: this.orderInfo.outTradeNo,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'success',
            duration: 2000,
          })
        },
        fail: function () {
          uni.showToast({
            title: '复制失败',
            icon: 'none',
            duration: 2000,
          })
        },
      })
    },
    goShopping() {
      uni.switchTab({
        url: '/pages/shopping/index',
      })
    },
    goNavi() {
      // 跳转到内置地图查看位置

      if (this.orderInfo.warehouseLocation) {
        const lat = this.orderInfo.warehouseLocation.split(',')[1]
        const lng = this.orderInfo.warehouseLocation.split(',')[0]

        uni.openLocation({
          latitude: Number(lat), // 目标纬度
          longitude: Number(lng), // 目标经度
          name: this.orderInfo.warehouseName, // 位置名称
          address: this.orderInfo.warehouseAddress, // 详细地址
          success: () => console.log('跳转成功'),
          fail: err => {
            this.navigateToThirdPartyMap(Number(lat), Number(lng), this.orderInfo.warehouseName)
          },
        })
      } else {
        this.uniShowToast('暂无该地区地址信息')
      }
    },
    showRefundPop() {
      this.$refs.popup.open()
    },
    closeRefundPop() {
      this.$refs.popup.close()
    },
    refundOrder(currentReason) {
      uni.showLoading({ title: '提交中' })
      refundApply({ orderId: this.orderInfo.id, refundReason: currentReason })
        .then(res => {
          uni.hideLoading()
          if (res.status === 200) {
            this.closeRefundPop()
            uni.navigateBack()
          } else {
            uni.showModal({ title: '提示', content: res.msg })
          }
        })
        .catch(err => {
          uni.hideLoading()
          uni.showModal({ title: '提示', content: err.msg })
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background: linear-gradient(to bottom, #2dc05b 20%, #f6f6f6 30%);
  height: 100vh;
  display: flex;
  flex-direction: column;

  &_header {
    padding-left: 30rpx;
    width: 100%;
    color: white;
    z-index: 999;
    &_top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 10rpx;
      &_refund {
        width: 160rpx;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 24rpx;
        margin-right: 20rpx;
      }
      &_status {
        margin-top: 100rpx;
        font-size: 32rpx;
        margin-bottom: 10rpx;
      }
    }
  }
  &_content {
    margin: 20rpx;
    flex: 1;
    z-index: 999;
    overflow: hidden;
    &_line {
      background-color: #edeff4;
      height: 1rpx;
      margin: 30rpx 0;
    }
    &_warehouse {
      display: flex;
      margin-top: 20rpx;

      padding: 20rpx;

      &_left {
        flex: 2;
        &_top {
          display: flex;
          align-items: center;
          &_icon {
            width: 30rpx;
          }
          &_name {
            font-size: 32rpx;
            margin: 0 10rpx;
          }
        }
        &_address {
          font-size: 26rpx;
          color: #666;
          margin-top: 10rpx;
        }
      }
      &_right {
        /* border-radius: 50%;
        padding: 8rpx;
        background-color: white;
        display: flex;
        align-self: center;
        align-items: center;
        justify-content: center;
        border: 1rpx solid #d9d9d9; */
        width: 70rpx;
        height: 70rpx;
      }
    }
    &_title {
      width: 120rpx;
      margin: 20rpx 0;
    }
    &_item {
      display: flex;
      margin-top: 20rpx;
      &_pic {
        flex: 1;
        width: 100rpx;
        height: 100rpx;
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 10rpx;
        }
      }
      &_title {
        font-weight: bold;
        margin: 0 10rpx;
        flex: 3;
        word-wrap: break-word; /*单词换行 */
        word-break: break-all; /*强制断行 */
      }
      &_right {
        flex: 1;
        text-align: right;
        &_num {
          color: #666;
          font-size: 24rpx;
        }
      }
    }
    &_coupon {
      &_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        &_left {
          font-size: 26rpx;
          color: #666;
          display: flex;
          align-items: center;
        }
        &_right {
          color: #ff3348;
        }
      }
      &_detail {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #f0f0f0;
        border-radius: 10rpx;
        padding: 10rpx;
        margin-top: 10rpx;
        &_price {
          color: #ff3348;
          font-size: 26rpx;
        }
      }
    }
    .red {
      color: #ff3348;
    }
    &_amount {
      text-align: right;
      margin-top: 30rpx;
      &_label {
        color: #666;
      }
      &_value {
        color: #ff3348;
        font-size: 48rpx;
      }
    }
    &_info {
      font-size: 28rpx;
      margin-top: 20rpx;
      padding: 20rpx;
      &_row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &_label {
          width: 120rpx;
        }
        &_code {
          display: flex;
          align-items: center;
          &_copy {
            background-color: #c4c4c4;
            color: white;
            font-size: 24rpx;
            padding: 2rpx 4rpx;
            border-radius: 5rpx;
            margin-left: 10rpx;
          }
        }
      }
    }
  }
  &_bottom {
    position: fixed;
    bottom: 0;
    left: 20rpx;
    right: 20rpx;
    z-index: 999;

    display: flex;
    padding: 20rpx 20rpx 50rpx 20rpx;

    &_left {
      flex: 2;
      &_discount {
        display: flex;
        align-items: center;
        &_label {
          font-size: 23rpx;
          margin-right: 10rpx;
        }
        &_original {
          font-size: 22rpx;
          text-decoration: line-through;
          color: #666;
          margin-left: 20rpx;
        }
        &_des {
          color: #ff3348;
          font-size: 24rpx;
        }
      }
    }
    &_btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      background: linear-gradient(to left, #ff8f00, #ffb300);
      color: white;
    }
  }
}
.info-bg {
  background-color: white;
  border-radius: 10rpx;
}
</style>
